<template>
  <div id="app">
    <h1>自定义组件的v-model</h1>

    <BaseInput v-model="message" />
    <BaseInput :value="message" @input="message = $event" />
    <p>文字：{{ message }}</p>

    <hr />

    <BaseCheckbox v-model="checked" />
    <BaseCheckbox :checked="checked" @change="checked = $event" />
    <p>已经赞了: {{ checked }}</p>
  </div>
</template>

<script>
import BaseInput from './components/BaseInput';
import BaseCheckbox from './components/BaseCheckbox';

export default {
  components: {
    BaseInput,
    BaseCheckbox,
  },
  data() {
    return {
      message: 'Hello 哈默',
      checked: true,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>
